<template>
  <view class="payment-page">
    <view class="payment-container">
      <view class="page-title">订单确认</view>

      <view class="order-info-card">
        <view class="card-header">
          <text class="header-title">订单信息</text>
        </view>
        <view class="order-details">
          <view class="detail-item">
            <text class="label">订单编号:</text>
            <text class="value">{{ orderInfo.orderNo }}</text>
          </view>
          <view class="detail-item">
            <text class="label">球桌:</text>
            <text class="value">{{ orderInfo.productName }}</text>
          </view>
          <view class="detail-item">
            <text class="label">预约日期:</text>
            <text class="value">{{ orderInfo.date }} {{ orderInfo.week }}</text>
          </view>
          <view class="detail-item">
            <text class="label">预约时间:</text>
            <text class="value">{{ orderInfo.timeSlot }}</text>
          </view>
          <view class="detail-item">
            <text class="label">时长:</text>
            <text class="value">{{ orderInfo.duration }}小时</text>
          </view>
        </view>
      </view>

      <view class="payment-info-card">
        <view class="card-header">
          <text class="header-title">费用明细</text>
        </view>
        <view class="payment-details">
          <view class="detail-item">
            <text class="label">单价:</text>
            <text class="value">¥{{ orderInfo.price }}/小时</text>
          </view>
          <view class="detail-item">
            <text class="label">时长:</text>
            <text class="value">{{ orderInfo.duration }}小时</text>
          </view>
          <view class="detail-item total-amount">
            <text class="label">总计:</text>
            <text class="value amount">¥{{ orderInfo.orderPayPrice }}</text>
          </view>
        </view>
      </view>

      <view class="payment-method">
        <view class="method-title">支付方式</view>
        <view class="method-item active">
          <view class="method-icon wechat-pay"></view>
          <text class="method-name">微信支付</text>
          <view class="method-selector">
            <view class="selector-inner"></view>
          </view>
        </view>
      </view>

      <view class="payment-button-container">
        <button class="payment-button" @click="handlePayment">
          立即支付 ¥{{ orderInfo.orderPayPrice }}
        </button>
      </view>
    </view>

    <!-- 支付结果弹窗 -->
    <view class="payment-modal" v-if="showPaymentModal">
      <view class="modal-content">
        <view class="modal-icon" :class="paymentResult.status">
          <text v-if="paymentResult.status === 'success'">✓</text>
          <text v-else>✗</text>
        </view>
        <view class="modal-title">{{ paymentResult.title }}</view>
        <view class="modal-message">{{ paymentResult.message }}</view>
        <view class="modal-actions">
          <button class="modal-button" @click="closePaymentModal">{{ paymentResult.buttonText }}</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app';
import {
  getOrderDetails,
  payOrder
} from '@/services/order.js';
import {
  formatDateTimeRange
} from '@/utils/date.js';

// 订单信息
const orderInfo = ref({});

// 支付结果模态框
const showPaymentModal = ref(false);
const paymentResult = ref({
  status: 'success', // success 或 fail
  title: '',
  message: '',
  buttonText: ''
});

// 页面加载时获取参数
onLoad(async (options) => {
  if (options.orderNo) {
    try {
      // 调用接口获取订单详情
      const res = await getOrderDetails(options.orderNo);
      if (res.code === 200) {
        orderInfo.value = res.data;
        const {
          formattedDate,
          formattedTimeSlot
        } = formatDateTimeRange(res.data.priceDateTimeRangeVOList);
        const datePart = formattedDate.split(' ')[0];
        const weekPart = formattedDate.split(' ')[1];
        Object.assign(orderInfo.value, {
          date: datePart,
          week: weekPart,
          timeSlot: formattedTimeSlot,
          duration: res.data.priceDateTimeRangeVOList.length,
          price: res.data.priceDateTimeRangeVOList[0].price
        });
      } else {
        throw new Error(res.message || "获取订单详情失败");
      }
    } catch (error) {
      console.error("获取订单详情失败:", error);
      uni.showToast({
        title: "订单数据获取失败",
        icon: 'none'
      });
    }
  } else {
    uni.showToast({
      title: "缺少订单信息",
      icon: "none"
    });
  }
});

// 处理支付
const handlePayment = async () => {
  console.log('发起支付，订单号:', orderInfo.value.orderNo);
  const data = await payOrder(orderInfo.value.orderNo);
  console.log(data);
  if (data.code == 200) {
    // 支付成功
    paymentResult.value = {
      status: 'success',
      title: "支付成功",
      message: "您的订单已支付成功，可前往订单详情查看",
      buttonText: "查看订单"
    };
  } else {
    // 支付失败
    paymentResult.value = {
      status: 'fail',
      title: "支付失败",
      message: "支付未成功，请检查网络或更换支付方式后重试",
      buttonText: "重新支付"
    };
  }
  showPaymentModal.value = true;
};

// 关闭支付结果弹窗
const closePaymentModal = () => {
  showPaymentModal.value = false;
  if (paymentResult.value.status === 'success') {
    uni.reLaunch({
      url: `/pages/mine/orderDetail?orderNo=${orderInfo.value.orderNo}`
    });
  }
};
</script>

<style lang="scss">
.payment-page {
  min-height: 100vh;
  background: linear-gradient(-13deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 15px;
}

.payment-container {
  .page-title {
    font-size: 20px;
    text-align: center;
    margin: 10px 0 20px;
    font-weight: 700;
    color: rgba(81, 89, 119, 1);
  }
}

.order-info-card,
.payment-info-card {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .card-header {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;

    .header-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
}

.order-details,
.payment-details {
  padding: 15px;

  .detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
      font-size: 14px;
      min-width: 160rpx;
    }

    .value {
      color: #333;
      font-size: 14px;
    }

    &.total-amount {
      margin-top: 10px;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;

      .amount {
        color: #ff6666;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.payment-method {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;

  .method-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }

  .method-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;

    &.active {
      border-color: #1aad19;
      background-color: #f0fff0;
    }

    .method-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 10px;

      &.wechat-pay {
        background-color: #1aad19;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 14px;
          height: 14px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.5,4C5.4,4,2,7.4,2,11.5c0,1.7,0.7,3.4,1.9,4.6l-0.5,2.8l2.8-0.5c1.2,0.8,2.7,1.2,4.2,1.2 c4.1,0,7.5-3.4,7.5-7.5C17,7.4,13.6,4,9.5,4z'/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
          transform: translate(-50%, -50%);
        }
      }
    }

    .method-name {
      flex: 1;
      font-size: 14px;
      color: #333;
    }

    .method-selector {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      border-radius: 50%;

      .selector-inner {
        width: 12px;
        height: 12px;
        background-color: #1aad19;
        border-radius: 50%;
        margin: 3px;
        display: none;
      }

      &.active .selector-inner {
        display: block;
      }
    }
  }
}

.payment-button-container {
  padding: 20px 0 10px;

  .payment-button {
    width: 100%;
    background-color: #165dff;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: bold;
  }
}

.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  .modal-content {
    background-color: #fff;
    border-radius: 10px;
    width: 80%;
    max-width: 300px;
    padding: 25px 20px;
    text-align: center;

    .modal-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;

      &.success {
        background-color: #e8f5e8;
        color: #1aad19;
      }

      &.fail {
        background-color: #fae8e8;
        color: #e33;
      }
    }

    .modal-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    .modal-message {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .modal-button {
      background-color: #165dff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 6px;
      width: 100%;
    }
  }
}
</style>